'use client'
import MyRanger from '@/app/component/my-ranger'
import { Info } from 'lucide-react'
import React, { useState } from 'react'

const page = () => {
  const [value2, setValue2] = useState<(number | undefined)[] | undefined>()
  const [value4, setValue4] = useState<(number | undefined)[] | undefined>()
  const [value6, setValue6] = useState<(number | undefined)[] | undefined>()
  const [value8, setValue8] = useState<(number | undefined)[] | undefined>()

  const numberOptions = [
    { label: '1990', value: 1},
    { label: '1991', value: 2},
    { label: '1992', value: 3},
    { label: '1993', value: 4},
    { label: '1994', value: 5},
    { label: '1995', value: 6},
    { label: '1996', value: 7},
    { label: '1997', value: 8},
    { label: '1998', value: 9},
    { label: '1999', value: 10},
    { label: '2000', value: 11},
    { label: '2001', value: 12},
    { label: '2002', value: 13},
    { label: '2003', value: 14},
    { label: '2004', value: 15},
    { label: '2005', value: 16},
    { label: '2006', value: 17},
    { label: '2007', value: 18},
    { label: '2008', value: 19},
    { label: '2009', value: 20},
    { label: '2010', value: 21},
    { label: '2011', value: 22},
    { label: '2012', value: 23},
    { label: '2013', value: 24},
    { label: '2014', value: 25},
    { label: '2015', value: 26},
    { label: '2016', value: 27},
    { label: '2017', value: 28},
    { label: '2018', value: 29},
    { label: '2019', value: 30},
    { label: '2020', value: 31},
    { label: '2021', value: 32},
    { label: '2022', value: 33},
    { label: '2023', value: 34},
    { label: '2024', value: 35},
    { label: '2025', value: 36},
  ]
  return (
    <div className='max-w-[800px] mx-auto'>
      <h2 className='text-2xl font-bold'>sting 和 number</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <h2>number</h2>
          {JSON.stringify(value2)}
          <MyRanger name='Year' className='w-[320px]' max={2025} min={1990} value={value2} onChange={setValue2} placeholder='Year' />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-2xl font-bold'>disabled</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <MyRanger name='Year' className='w-[320px]' max={2025} min={1990} disabled value={value4} onChange={setValue4} placeholder='Year' />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-2xl font-bold'>prefix</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <MyRanger name='Year' className='w-[320px]' max={2025} min={1990} prefix={<Info className='w-4 h-4' />} value={value6} onChange={setValue6} placeholder='Year' />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-2xl font-bold'>suffix</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <MyRanger name='Year' className='w-[320px]' max={2025} min={1990} suffix={'.com'} value={value8} onChange={setValue8} placeholder='Year' />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-2xl font-bold'>max min</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <MyRanger name='Year' className='w-[320px]' max={2025} min={1990} value={value8} onChange={setValue8} placeholder='Year' />
        </li>
      </ul>
      <br />
      <br />
      <hr />

      <h2 className='text-2xl font-bold'>max min</h2>
      <ul className='flex max-md:flex-col gap-2'>
        <li>
          <MyRanger name='Price' className='w-[320px]' min={0} max={200000} step={10000} value={value8} onChange={setValue8} placeholder='Price' />
        </li>
      </ul>
      <br />
      <br />
      <hr />
    </div>
  )
}

export default page